<template>
    <div class="page_container">
        <DataTableBar :data="tableData" :columns="columns" :config="config"
            :total="total" :pages="pages" :loading="loading"
            @search="search" @reset="searchReset" @refresh="refresh"
            @currentChange="currentChange" @sizeChange="sizeChange"
            @addBefore="addBefore" @editBefore="editBefore" @remove="removeItem">
            <template v-slot:annuallyDate="scope">
                <span>{{ formatDate.dateFormat( scope.row.annuallyDate || '') }}</span>
            </template>
            <template v-slot:deadlineDate="scope">
                <span>{{ formatDate.dateFormat( scope.row.deadlineDate || '') }}</span>
            </template>
            <template v-slot:issuanceDate="scope">
                <span>{{ formatDate.dateFormat( scope.row.issuanceDate || '') }}</span>
            </template>
            <template v-slot:updateDate="scope">
                <span>{{ formatDate.dateFormat( scope.row.updateDate || '') }}</span>
            </template>
        </DataTableBar>
        <CreateQualification v-model:show="createQualificationDrawerShow" :showFileList="true" :defaultValue="selectrow" :state="operState"
            @submit="edit"></CreateQualification>
    </div>
</template>

<script setup>
    // 公司资质
    import { ref, onMounted } from "vue";
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    import { comqualificationsPages, createComqualifications, editComqualifications, removeComqualifications } from "@/api/archives/comqualifications"
    import DataTableBar from "@/components/DataComponents/DataTableBar.vue"
    import CreateQualification from "./components/CreateQualification.vue"
    const { proxy } = getCurrentInstance();
    const pages = ref({ page_current: 1, page_size: 10 });
    const total = ref(0);
    const loading = ref(false);
    const createQualificationDrawerShow = ref(false);
    const searchParams = ref({});
    const selectrow = ref({});
    const operState = ref(false);
    const tableData = ref([]);
    const columns = ref([
        { title: '资质名称',key: 'aptitudeName', minWidth: 150,showTooltip: true,  search: true,},
        { title: '证书编号',key: 'reportNum', width: 160, showTooltip: true, },
        { title: '发证日期',key: 'issuanceDate', width: 120, tableCustom: true, },
        { title: '有效截至日期',key: 'deadlineDate', width: 120, tableCustom: true, },
        { title: '下次年检日期',key: 'annuallyDate', width: 120, tableCustom: true, },
        { title: '资质标签',key: 'label', width: 120, showTooltip: true, },
        { title: '资质说明',key: 'remarks', width: 140, showTooltip: true, },
        { title: '更新时间',key: 'updateDate', width: 120, tableCustom: true, },
    ]);
    const config = ref({
        addBtnText: '新建资质',
        editCustom: true,
    });
    const addBefore = () => {
        operState.value = false;
        selectrow.value = {};
        createQualificationDrawerShow.value = true;
    };
    const editBefore = (rowData) => {
        operState.value = true;
        selectrow.value = rowData;
        createQualificationDrawerShow.value = true;
    };
    const edit = (fromData) => {
        if(fromData.fileList && fromData.fileList.length){
            const fileUrls = fromData.fileList.map( item => item.url );
            fromData.attachUrl = fileUrls.toString();
        }
        console.log('fromData', fromData);
        if(operState.value){
            editComqualifications({
                ...fromData
            }).then(res => {
                createQualificationDrawerShow.value = false;
                ElMessage({ type: 'success', message: '资质编辑成功' })
                getTablePages();
            });
            return
        }
        createComqualifications({
            ...fromData
        }).then(res => {
            createQualificationDrawerShow.value = false;
            ElMessage({ type: 'success', message: '资质创建成功' })
            getTablePages();
        });
    };
    const removeItem = (item) => {
        ElMessageBox.alert('是否删除此公司资质吗？', '提示', {
            confirmButtonText: '确 定',
            cancelButtonText: '暂 不',
            draggable: true,
            type: 'warning',
            showCancelButton: true,
            callback: (action) => {
                if(action == 'confirm'){
                    removeComqualifications({
                        id: item.id
                    }).then(res => {
                        ElMessage({ type: 'success', message: '删除成功', })
                        getTablePages();
                    });
                }
            },
        });
    };
    const currentChange = (current) => {
        pages.value.page_current = current;
        getTablePages();
    };
    const sizeChange = (size) => {
        pages.value.page_size = size;
        getTablePages();
    };
    const refresh = () => {
        getTablePages();
    };
    const search = (searchParam) => {
        searchParams.value = searchParam.value;
        getTablePages();
    }
    const searchReset = () => {
        searchParams.value = {};
        getTablePages();
    };
    const getTablePages = () => {
        loading.value = true;
        comqualificationsPages({
            current: pages.value.page_current,
            size: pages.value.page_size,
            ...searchParams.value
        }).then(res => {
            tableData.value = res.data.records;
            total.value = res.data.total;
            loading.value = false;
        });
    };
    onMounted(() => {
        getTablePages();
    })
</script>
<style scoped lang="scss">
  
</style>